<template>
  <!-- 自定义导航类容 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="导航标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="导航标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="导航类型" prop="navigationBarTypeId">
        <el-select v-model="queryParams.navigationBarTypeId" placeholder="请选择类型">
          <el-option v-for="item in typelist" :key="item.id" :label="item.navigationBarName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="add-box">
      <el-button type="primary" plain size="mini" @click="addProduct">添加导航</el-button>
      <el-button type="warning" plain size="mini" @click="handleDel()">删除导航</el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="导航分类名称" align="center" prop="navigationBarTypeName" />
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="内容序号" align="center" prop="sort" />
      <!-- <el-table-column label="内容" align="center" prop="content">
        <template slot-scope="scope">
          <span v-html="scope.row.content"></span>
        </template>
      </el-table-column> -->
      <el-table-column label="封面" align="center" prop="coverUrl">
        <template slot-scope="scope">
          <el-image :src="baseUrl + scope.row.coverUrl" :preview-src-list="[baseUrl + scope.row.coverUrl]" />
        </template>
      </el-table-column>
      <el-table-column label="简介" align="center" prop="introduction" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status == 1 ? '激活' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
          <el-button type="text" size="mini" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize" @pagination="getList" />

    <!-- 添加 & 修改 -->
    <el-dialog :title="addForm.id ? '修改内容' : '添加内容'" :visible.sync="addShow" width="60%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Editors :content="addForm.content" v-model="addForm.content"  />
          <!-- <Editors v-model="addForm.content" @getContent="editorInput" /> -->
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="addForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="coverUrl">
          <Image-upload v-model="addForm.coverUrl" :limit="1" :isShowTip="false" />
        </el-form-item>
        <el-form-item label="导航类型" prop="navigationBarTypeId">
          <el-select v-model="addForm.navigationBarTypeId" placeholder="请选择类型">
            <el-option v-for="item in typelist" :key="item.id" :label="item.navigationBarName" :value="item.id" :disabled="item.status == 2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="序号" prop="sort">
          <el-input v-model="addForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="产品状态" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio label="1">激活</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addHandleSure">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailShow" width="50%" :close-on-click-modal="false">
      <el-form :model="detailRow" label-width="100px">
        <div class="flex">
          <div>
            <el-form-item label="导航分类名称">{{ detailRow.navigationBarTypeName || "-" }}</el-form-item>
            <el-form-item label="状态"> {{ detailRow.status == 1 ? '激活' : '禁用' || "-" }} </el-form-item>
            <el-form-item label="封面">
              <el-image :src="baseUrl + detailRow.coverUrl" :preview-src-list="[baseUrl + detailRow.coverUrl]"
                style="width: 100px;height: 80px;" v-if="detailRow.coverUrl" />
              <span v-else>{{ '-' }}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="标题">{{ detailRow.title || "-" }}</el-form-item>
            <el-form-item label="简介">{{ detailRow.introduction || "-" }}</el-form-item>
          </div>
        </div>
        <!-- <el-form-item label="内容">
          <span v-html="detailRow.content"></span>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="detailShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { navigationContentList, addNavigationContent, updateNavigationContent, delNavigationContent } from "@/api/websiteConfig/navigationBarContent";
import { navigationTypeList } from "@/api/websiteConfig/navigationBarType";

export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 充值管理表格数据
      // 查询参数
      queryParams: {
        title: '',
        navigationBarTypeId: '',
        params: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      detailRow: {},//详情内容
      detailShow: false,//详情弹窗开关
      addShow: false,//添加弹窗开关
      addForm: {},//添加的内容
      rules: {//添加表单验证
        content: [
          { required: true, message: '请输入内容', trigger: 'change' }
        ],
        introduction: [
          { required: true, message: '请输入简介', trigger: 'change' }
        ],
        coverUrl: [
          { required: true, message: '请上传封面图片', trigger: 'change' }
        ],
        navigationBarTypeId: [
          { required: true, message: '请选择导航类型', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入序号', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'change' }
        ],
      },
      typelist: [],//导航类型下拉框选项
    };
  },
  created() {
    //获取表格数据
    this.getList();
    //获取类型列表
    this.getTypeList();
  },
  methods: {
    /**获取导航类型列表 */
    getTypeList() {
      navigationTypeList({})
        .then((res) => {
          this.typelist = res.rows;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**多选 */
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
    /**删除 */
    handleDel(row) {
      let id = row ? [row.id] : this.ids;
      this.$modal.confirm(`是否确认删除该导航内容?`).then(() => {
        delNavigationContent(id).then(res => {
          if (200 == res.code) {
            this.getList();
            this.$message.success('删除成功！');
          }
        })
      }).catch(() => { });
    },
    /**打开添加弹窗 */
    addProduct() {
      this.addShow = true;
      this.addForm = {};
      this.resetForm('addForm');
    },
    /**打开修改弹窗 */
    handleUpdate(row) {
      this.addShow = true;
      this.addForm = Object.assign({}, row);
    },
    /**确认添加 & 修改 */
    addHandleSure() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          let axios = this.addForm.id ? updateNavigationContent : addNavigationContent;
          axios(this.addForm).then(res => {
            if (200 == res.code) {
              this.getList();
              this.addShow = false;
              this.$message.success(this.addForm.id ? '修改成功' : '添加成功');
            }
          })
        }
      });
    },
    /**关闭添加 & 修改对话框 */
    cancelForm() {
      this.resetForm('addForm');
      this.addShow = false;
    },
    /**查看详情 */
    handleView(row) {
      this.detailRow = Object.assign({}, row);
      this.detailShow = true;
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      navigationContentList(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.add-box {
  margin-bottom: 20px;
}

.flex {
  display: flex;

  >div {
    flex: 1;
  }
}

.el-select {
  width: 100%;
}
</style>
